<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 依赖包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器 -->
    <div id="app">

    </div>
    <!-- 容器2 -->
    <div id="app1">

    </div>

</body>

</html>
<script>

    //Vue局部组件:
    //组件步骤:
    //第一步:定义组件,利用Vue.extend方法定义局部组件
    //第二步：传递参数,配置对象,和Vue构造函数传递配置对象一样的
    //第三步：注意事项
    //第四步：注册
    //第五步:使用组件
    //定义头部组件
    let Header = Vue.extend({
        //组件的配置项里面，可以书写name字段，name是给组件起名字
        //控制在开发者工具中显示的名字
        name:"Header",
        //template[模板]:相应组件的结构(子组件)
        template: `
         <div class="header">
             <h1 @click="count++">累加器{{count}}---{{title}}</h1>
         </div>
        `,
        //组件的响应式数据data，务必是函数******
        data() {
            return {
                count: 1
            }
        },
        computed: {
            title() {
                return "我是组件的计算属性"
            }
        }
    });

    //定义主题组件
    let Main = Vue.extend({
        name:"Main",
        //组件结构
        template: `
          <div class="main">
            <pre>
                鹅鹅鹅
                 曲项向天歌。
                  白毛浮绿水
                   红掌拨清波。
            </pre>
            <input type="text" v-model="msg"/>
        </div>
          `,
        data() {
            return {
                msg: ''
            }
        }
    })

    //定义底部组件
    let Footer = Vue.extend({
        name:"Footer",
        //template右侧这里一般书写模板字符串-----双引号字符串
        //因为模板字符串可以换行
        template: `
          <div class="footer">
            <h1>
                {{msg}}
            </h1>
        </div>
          `,
        //组件的响应式数据务必是函数
        data() {
            return {
                msg: "我是Footer组件"
            }
        }
    })
    //创建VM
    let VM = new Vue({
        el: '#app',
        //components:配置对象的一个K，用于注册局部组件
        components: {
            //compoents,右侧是一个对象，书写KV形式
            //注册组件:组件的首个字母一般是大写的
            //组件在使用的使用也是标签形式
            A: Header,
            B: Main,
            C: Footer
        },
        template: `
           <div>
             <A/>
             <B/>
             <C/>
           </div>
        `
    });
     //注意事项：1
    //el配置对象的一个配置项，只能在new Vue构造函数中配置对象里面出现，
    //虽然局部组件在注册的时候，需要的也是和Vue构造函数相同的配置对象，但是不能出现el挂载点了

    //注意事项2:
    //为什么组件响应式数据哪里必须是函数?
    //因为组件可以复用，让复用的组件之间的数据相互不影响。

    //注意事项3:new Vue 需要在组件底部，因为需要先定义组件，让注册才能使用

    //注意事项4：
    //Vue组件在使用的时候，使用标签，首字母可以大写、也就可以小写
    //但是以后咱们的习惯就是首字母大写
</script>